<template>
  <el-dialog
    title="分配角色"
    :visible="showRoleDialog"
    width="50%"
    @close="handleClose"
  >
    <el-row type="flex" justify="center" style="margin:20px 0">
      <el-checkbox-group v-model="ids">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
    </el-row>

    <el-row type="flex" justify="center">
      <el-button type="success" @click="setRoles">提交</el-button>
      <el-button type="primary" @click="handleClose">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { userBaseInfo } from '@/api/user'
import { getRoleList } from '@/api/setting'
import { setRoles } from '@/api/emloyees'
export default {
  name: 'roleSetting',
  props: {
    showRoleDialog: {
      type: Boolean,
      dafault: false
    },
    userId: {
      type: String,
      default: '',
      required: true
    }
  },
  data () {
    return {
      ids: [],
      roleList: []
    }
  },
  created () {
    this.getRole()
  },
  methods: {
    handleClose () {
      this.$parent.showRoleDialog = false
    },
    // 获取角色列表
    async getRole () {
      const res = await getRoleList({ page: 1, pagesize: 999 })
      console.log('角色列表', res)
      this.roleList = res.data.rows
    },
    // 获取用户基本资料
    async getuserprofile (id) {
      const res = await userBaseInfo(id)
      console.log('基本信息', res)
      this.ids = res.data.roleIds
    },
    // 给员工分配角色
    async setRoles () {
      await setRoles({ id: this.userId, roleIds: this.ids })
      this.$message.success('分配角色成功')
      this.handleClose()
    }
  }
}
</script>

<style></style>
